<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>我的礼品-老师</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.imgStyle1{
				width: 30px;
				margin: 5px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			    background-color: #00D4C5;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				color: #00D4C5;
			}
			 html,#slider,.mui-content{
                width: 100%;
                height: 100%;
            }
            body{
                margin-top: 0px;
                width: 100%;
               /* height: calc(100% - 45px);*/
              height: calc(100%);
            }
            .mui-slider-group{
               /* height: calc(100% - 45px);*/
                height: calc(100%);
            }           
            .mui-content{
				background-color: #FFFFFF;
				overflow-y: scroll;
			}
            .mui-control-content .mui-loading {
                margin-top: 50px;
            }
            .width{
				width: 100%;
			}
			li{
				list-style:none;
			}
			
			.div1{
				width: 100%;
				padding: 10px;
				border-bottom: 1px solid #a3a3a3;
			}
			
			.btnStyle{
				border: none;
				background-color: #00d5c5;
				color: #FFFFFF;
				width: 70px;
			}
			.btnStyle02{
				border: none;
				background-color: #eeeeee;
				color: #00d5c5;
				width: 70px;
			}
			.fontSize-15{
			    font-size: 15px;
			}
			.magin-top10{
				margin-top: 10px;
			}
			.padding-left10{
				padding-left: 10px;
			}
			
			.imgStyle2{
				width: 100%;
				height: 150px;
			}
			.imgStyle03{
				width: 50px;
			}
			.imgStyle05{
				width: 20px;
			}
			
			
			
			
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的礼品</h1>
            <img class="imgStyle1 mui-pull-right" onclick="onUpload()" src="../img/icon-upload.png"/>
		</header>
		
		<div class="mui-content fill-all flex">
			<div id="slider" class="mui-slider flex-1 flex v-flex">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						礼品列表
					</a>
					<a class="mui-control-item" href="#item2mobile">
						已发礼品
					</a>
					<a class="mui-control-item" href="#item3mobile">
						代发礼品
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" ></div>
				<div class="mui-slider-group">
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                        <div id="scroll1" class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                
                                <div class="div1 flex v-center h-center">
				
									<img class="imgStyle03 flex-2" src="../img/bg-01.png"/>
										
									
									<div class="flex-3 padding-left10">
										<div>
											<span class="green">喵喵喵</span>
											<span class="fontSize-15">今天12.31</span>
										</div>
										<div class="magin-top10">
											<span>哈哈牌钢笔</span>
										</div>
										<div class="flex v-center">
											<img style="width: 20px"  src="../img/star-y.png"/>
										    <span class="yellow">88</span>
										</div>
										<div>
											<span>数量 :</span>
											<span class="red">33</span>
										</div>
										
									</div>
									<div class="flex-2" style="text-align: center;">
										<button class="mui-btn btnStyle" >代发</button>
									</div>
									
								</div>
								
								<div class="div1 flex v-center h-center">
				
									<img class="imgStyle03 flex-2" src="../img/bg-01.png"/>
										
									
									<div class="flex-3 padding-left10">
										<div>
											<span class="green">喵喵喵</span>
											<span class="fontSize-15">今天12.31</span>
										</div>
										<div class="magin-top10">
											<span>哈哈牌钢笔</span>
										</div>
										<div class="flex v-center">
											<img style="width: 20px"  src="../img/star-y.png"/>
										    <span class="yellow">88</span>
										</div>
										<div>
											<span>数量 :</span>
											<span class="red">33</span>
										</div>
										
									</div>
									<div class="flex-2" style="text-align: center;">
										<button class="mui-btn btnStyle02" >已发</button>
									</div>
									
								</div>
                                
                                
                                                                           
                            </div>
                        </div>
                    </div>
                    <div id="item2mobile" class="mui-slider-item mui-control-content">
                        <div id="scroll2" class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <div class="mui-loading">
                                    <div class="mui-spinner">
                                    	
                                    	
                                    	
										
										
                                    	
                                    	
                                    </div>
                                </div>
                            </div>
                        </div>
				    </div>
				    <div id="item3mobile" class="mui-slider-item mui-control-content">
                        <div id="scroll3" class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <div class="mui-loading">
                                    <div class="mui-spinner">
                                    	
                                    	
                                    	
                                    </div>
                                </div>
                            </div>
                        </div>
				    </div>
				</div>
		</div>
		
		
		
		
		
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			(function($) {
					$('.mui-scroll-wrapper').scroll({
						indicators: true //是否显示滚动条
					});
					
					var html2= '<div class="div1 flex v-center h-center"><img class="imgStyle03 flex-2" src="../img/bg-01.png"/><div class="flex-3 padding-left10"><div><span class="green">喵喵喵</span><span class="fontSize-15">今天12.31</span></div><div class="magin-top10"><span>哈哈牌钢笔</span></div><div class="flex v-center"><img style="width: 20px"  src="../img/star-y.png"/><span class="yellow">88</span></div><div><span>数量 :</span><span class="red">33</span></div></div><div class="flex-2" style="text-align: center;"><button class="mui-btn btnStyle02" >已发</button></div></div><div class="div1 flex v-center h-center"><img class="imgStyle03 flex-2" src="../img/bg-01.png"/><div class="flex-3 padding-left10"><div><span class="green">喵喵喵</span><span class="fontSize-15">今天12.31</span></div><div class="magin-top10"><span>哈哈牌钢笔</span></div><div class="flex v-center"><img style="width: 20px"  src="../img/star-y.png"/><span class="yellow">88</span></div><div><span>数量 :</span><span class="red">33</span></div></div><div class="flex-2" style="text-align: center;"><button class="mui-btn btnStyle" >代发</button></div></div>'
					
					var html3= '<div class="div1 flex v-center h-center"><img class="imgStyle03 flex-2" src="../img/bg-01.png"/><div class="flex-3 padding-left10"><div><span class="green">喵喵喵</span><span class="fontSize-15">今天12.31</span></div><div class="magin-top10"><span>哈哈牌钢笔</span></div><div class="flex v-center"><img style="width: 20px"  src="../img/star-y.png"/><span class="yellow">88</span></div><div><span>数量 :</span><span class="red">33</span></div></div><div class="flex-2" style="text-align: center;"><button class="mui-btn btnStyle" >赠送</button></div></div><div class="div1 flex v-center h-center"><img class="imgStyle03 flex-2" src="../img/bg-01.png"/><div class="flex-3 padding-left10"><div><span class="green">喵喵喵</span><span class="fontSize-15">今天12.31</span></div><div class="magin-top10"><span>哈哈牌钢笔</span></div><div class="flex v-center"><img style="width: 20px"  src="../img/star-y.png"/><span class="yellow">88</span></div><div><span>数量 :</span><span class="red">33</span></div></div><div class="flex-2" style="text-align: center;"><button class="mui-btn btnStyle" >赠送</button></div></div>'
					
					var item2 = document.getElementById('item2mobile');
					var item3 = document.getElementById('item3mobile');
					document.getElementById('slider').addEventListener('slide', function(e) {
						var selects = e.detail.slideNumber;
					//	document.getElementById("sliderProgressBar").style.marginLeft = (selects * 20) + "%";
						if(selects === 1) {
							if(item2.querySelector('.mui-loading')) {
								setTimeout(function() {
									item2.querySelector('.mui-scroll').innerHTML = html2;
								}, 500);
							}
						}else if(selects === 2){
							if(item3.querySelector('.mui-loading')) {
								setTimeout(function() {
									item3.querySelector('.mui-scroll').innerHTML = html3;
								}, 500);
							}
						}
					});
				}

			)(mui);
			
			
			
			
			
			//上传礼品
			function onUpload(){
				mui.openWindow({
				   url: "my-upload.html"
				});
			}
			
		</script>
		
	</body>
</html>
